<template>
    <div id=push>
        <el-table
            :data="tableData"
            style="width: 100%;margin-bottom: 20px;"
            row-key="id"
            border
            default-expand-all
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
            <el-table-column
            prop="id"
            label="分类ID"
            sortable
            width="210">
            </el-table-column>
            <el-table-column
            prop="title"
            label="分类名称"
            sortable
            width="210">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                    size="mini"
                    type="warning"
                    @click="dialogFormVisible = true">添加子类</el-button>
                    <el-button
                    size="mini"
                    @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        
        <!-- 添加 -->
        <el-dialog title="添加" :visible.sync="dialogFormVisible">
            <el-form ref="form" :model="form" :rules="rules">
                <el-form-item label="分类名称" :label-width="formLabelWidth" prop="cateName">
                    <el-input v-model="form.cateName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="父级ID" :label-width="formLabelWidth" prop="parentId">
                    <el-input v-model="form.parentId" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="排序" :label-width="formLabelWidth" prop="sorts">
                    <el-input v-model="form.sorts" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="添加时间" :label-width="formLabelWidth" prop="addTimes">
                    <el-input type="date" v-model="form.addTimes" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" v-on:click="dialogFormAdd('form')">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 修改 -->
        <el-dialog title="修改" :visible.sync="dialogFormVisibles">
            <el-form ref="forms" :model="forms" :rules="rules">
                <el-form-item label="分类名称" :label-width="formLabelWidth" prop="cateName">
                    <el-input v-model="forms.cateName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="父级ID" :label-width="formLabelWidth" prop="parentId">
                    <el-input v-model="forms.parentId" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="排序" :label-width="formLabelWidth" prop="sorts">
                    <el-input v-model="forms.sorts" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="添加时间" :label-width="formLabelWidth" prop="addTimes">
                    <el-input type="date" v-model="forms.addTimes" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisibles = false">取 消</el-button>
                <el-button type="primary" v-on:click="dialogFormUpt('forms')">确 定</el-button>
            </div>
        </el-dialog>
        
    </div>
</template>
<script>
  export default {
    data() {
      return {
        tableData: [],
            form:{
                cateName: '',
                parentId:'',
                sorts: '',
                addTimes: ''
            },
            forms:{
                cateId: '',
                cateName: '',
                parentId:'',
                sorts: '',
                addTimes: ''
            },
            dialogFormVisible:false,
            dialogFormVisibles:false,
            formLabelWidth:'120px',
            rules:{
                cateName: [{
                    required: true,
                    message: '请输入分类名称',
                    trigger: 'blur'
                }],
                parentId:[{
                    required: true,
                    message: '请输入父级ID',
                    trigger: 'blur'
                }],
                sorts: [{
                    required: true,
                    message: '请输入排序',
                    trigger: 'blur'
                }],
                addTimes: [{
                    required: true,
                    message: '请输入添加时间',
                    trigger: 'blur'
                }]
            }
      }
    },
    // 组件被创建时间处理
    created:function(){
        // 用axios发送请求给api
        this.axios
            .get("https://localhost:44324/api/ProCate/TreeForm")
            .then((res) => {
                this.tableData = res.data;
            });
    },
    methods: {
        show(){
            // 用axios发送请求给api
            this.axios
                .get("https://localhost:44324/api/ProCate/TreeForm")
                .then((res) => {
                    this.tableData = res.data;
                });
        },
        //添加
        dialogFormAdd(form){
            console.log(this.form);
            this.$refs[form].validate((valid) => {
                if(valid){
                    this.axios({
                    url: 'https://localhost:44324/api/ProCate/AddProCate',
                    method: 'post',
                    data: this.form
                    }).then((res) => {
                        if (res.data.code > 0) {
                            console.log();
                            this.$message({
                                type: 'success',
                                message: '添加成功!'
                            });
                            this.show(); //刷新
                        } else {
                            this.$message({
                            type: 'info',
                            message: '已取消添加'
                            })
                        }
                    })
                }else{
                    console.log('error submit!');
                    return false;
                }
            })
                
        },
        //删除
        handleDelete(a) {
            if(!confirm("确认删除吗？")){
                return;
            }
            this.axios
                .delete('https://localhost:44324/api/ProCate/DelProCate', 
                    {params:{id:a}})
                .then((res) => {
                    if (res.data.code > 0) {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.show(); //刷新
                    } else {
                        this.$message({
                        type: 'info',
                        message: '已取消删除'
                        })
                    }
                })
            },
        //反填
        handleEdit(f){
            this.dialogFormVisibles = true;

            this.forms.cateId=f.id;
            this.forms.cateName=f.title;
            this.forms.parentId=f.spread;
            
            console.log(cateId);
            console.log(cateName);
            console.log(parentId);
        },
        //修改
        dialogFormUpt(forms){
            console.log(this.forms);
            this.$refs[forms].validate((valid) => {
                if(valid){
                    this.axios({
                    url: 'https://localhost:44324/api/ProCate/UptProCate',
                    method: 'post',
                    data: this.forms,
                    }).then((res) => {
                        if (res.data.code > 0) {
                            console.log();
                            this.$message({
                                type: 'success',
                                message: '修改成功!'
                            });
                            this.show(); //刷新
                        } else {
                            this.$message({
                            type: 'info',
                            message: '已取消修改'
                            })
                        }
                    })
                }else{
                    console.log('error submit!');
                    return false;
                }
            })
                
        },
    },
  }
</script>
